<template>
    <div class="product-list">
        <el-table v-if="list.length" :data="list">
            <el-table-column align="center" label="编号" prop="bannerid"></el-table-column>
            <el-table-column align="center" label="图片" prop="img">
                <template v-slot="{row}">
                    <img width="100" :src="row.img" alt="">
                </template>
            </el-table-column>
            <el-table-column align="center" label="提示" prop="alt"></el-table-column>
            <el-table-column align="center" label="链接" prop="link"></el-table-column>
            <el-table-column align="center" label="是否公开" prop="flag" v-if="isSuperAdmin||isAdmin">
                <template v-slot="{row}">
                   <el-switch
                        :disabled="isGuest"
                        v-model="row.flag"
                        @change="flagChangeHandler($event,row.bannerid)"
                   >
                   </el-switch>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
                <template v-slot="{row}">
                   <el-button v-authority:disabled="['superAdmin','admin']" type="primary" size="small" @click="deleteHandler(row.bannerid)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import { getBannerListAPI,updateBannerFlagAPI,deleteBannerAPI } from '@/api/banner';
    import authority from "@/mixins/authority"
    export default {
        name:"BannerListView",
        mixins:[authority],
        data(){
            return {
                list:[]
            }
        },
        methods:{
            async getBannerList(){
                try{
                    var res = await getBannerListAPI();
                    console.log("轮播列表请求成功",res);
                    this.list = res.data;
                }catch(err){
                    this.$message.error(err.message);
                }
            },
            async flagChangeHandler(flag,bannerid){
                try{
                    var res = await updateBannerFlagAPI({bannerid,flag});
                    console.log("轮播状态更新成功",res);
                    this.$message.success("更新成功");
                }catch(err){
                    this.$message.error(err.message);
                }
            },
            async deleteHandler(bannerid){
                console.log("删除轮播",bannerid);
                this.$confirm("是否删除当前轮播图","提示").then(async ()=>{
                    try{
                    var res = await deleteBannerAPI({bannerid});
                    console.log("轮播删除成功",res);
                    this.$message.success("删除成功");

                    var index = this.list.findIndex(v=> v.bannerid == bannerid);
                    this.list.splice(index,1);

                    }catch(err){
                        this.$message.error(err.message);
                    }
                }).catch(err=>{
                    console.log("点击了取消",err);
                })
            }
        },
        mounted(){
            this.getBannerList();
        },

        beforeRouteLeave:function(to,from,next){
            console.log("准备离开列表页/banner/list");
            console.log("from",from);
            console.log("to",to);
            this.$confirm("任务还未完成,是否继续","提示").then(()=>{
                next(false);
            }).catch(()=>{
                next();
            })
        }

    }
</script>

<style scoped>

</style>